<template>
  <div class="container">
    <div style="background-color: #2758bb">
      <nav-bar subTitle="数字经济">
      </nav-bar>
    </div>
    <div class="body">
      <el-row :gutter="20">
        <el-col :span="10">
          <div class="card-box" :style="{height:'200px'}">
            <title-box title="数字产业化" sub_title="制造业"></title-box>
            <div class="card-chart">
              <manufacturing-industry-chart></manufacturing-industry-chart>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="card-box" :style="{height:'200px'}">
            <title-box title="数字产业化" sub_title="服务业"></title-box>
            <div class="card-chart">
              <digital-industrialization></digital-industrialization>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="card-box" :style="{height:'200px'}">
            <title-box title="数字产业化" sub_title="数字化车间/智能工厂"></title-box>
            <div class="card-chart">
              <smart-factory></smart-factory>
            </div>
          </div>
        </el-col>
      </el-row>
      <div style="height: 20px" ></div>
      <el-row :gutter="20" >
        <el-col :span="5">
          <div class="card-box" style="height: 870px">
            <title-box title="数字产业化分析"></title-box>
            <div style="height: 265px;">
              <div class="sub-title">细分行业分布一览</div>
              <div class="card-chart">
                <segmented-industries></segmented-industries>
              </div>
            </div>
            <div style="height: 10px"></div>
            <div style="height: 265px;">
              <div class="sub-title">重点领域经济分布一览</div>
              <div class="card-chart">
                <key-areas></key-areas>
              </div>
            </div>
            <div style="height: 10px"></div>
            <div style="height: 265px;">
              <div class="sub-title">产业经济区间分布一览</div>
              <div class="card-chart">
                <industrial-economy></industrial-economy>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="14">
          <div class="card-box" :style="{height:'870px'}">
            <digital-map></digital-map>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="card-box" style="padding-bottom: 20px">
            <title-box title="产业数字化分析"></title-box>
            <ul class="card-list">
              <li v-for="item in digitalAnalysisOfIndustries" :style="{backgroundColor:item.color}">
                <el-image :src="item.icon"></el-image>
                <div>
                  <div>项目数 <strong style="color:#528dff;font-size: 1.2em">{{ item.count }}</strong> {{ item.unit }}
                  </div>
                  <div>占全市项目数比： {{ item.rate }}%</div>
                </div>
              </li>
            </ul>
            <div style="height: 280px;overflow: hidden">
              <vue3ScrollSeamless
                  class="scroll-wrap"
                  :classOptions="classOptions"
                  :dataList="smartFactoryProjectList"
              >
                <ul class="ui-wrap">
                  <li v-for="(item,i) of smartFactoryProjectList" :key="i">
                    <strong>{{ item.projectName }}</strong>
                    <div class="ui-flex">
                      <div>投资规模 {{ item.investmentScale }}</div>
                      <div>建设周期 {{ item.constructBeginDate }} - {{ item.constructEndDate }}</div>
                    </div>
                    <el-link type="primary" icon="link">{{ item.companyName }}</el-link>
                  </li>
                </ul>
              </vue3ScrollSeamless>
            </div>
          </div>
          <div style="height: 20px"></div>
          <div class="card-box" style="height: 280px">
            <title-box title="数字经济政策" :show="true"></title-box>
            <ul class="card-boot">
              <li>
                <strong>宁波市经济和信息化局《关于组织开展浙江省5G产业及应用情况调查报告》</strong>
                <small>发文单位：工信部</small>
                <small>发文日期：2021-07-20</small>
              </li>
              <li>
                <strong>工业和信息化部工业与互联网专项工作相关印发《工业与互联网创新发展行动计划(2021-02)》</strong>
                <small>发文单位：工信部</small>
                <small>发文日期：2021-07-20</small>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
      <div style="height: 20px" ></div>
      <el-row :gutter="20" >
        <el-col :span="16">
          <div class="card-box" :style="{height:'300px'}">
            <title-box title="数字产业化区域排行">
              <template #btns>
                <div style="text-align: right">
                  <el-button type="primary">制造业</el-button>
                  <el-button type="primary" plain>服务业</el-button>
                </div>
              </template>
            </title-box>
            <div style="padding: 10px 20px 20px 20px">
              <mark-rank></mark-rank>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="card-box" :style="{height:'300px'}">
            <title-box title="产业数字化区域排行"></title-box>
            <div style="padding: 10px 20px 20px 20px">
              <digital-dis></digital-dis>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>


<script setup>
import NavBar from "@/components/navBar.vue";
import titleBox from "@/views/digitalEconomy/components/titleBox.vue";
import ManufacturingIndustryChart from "@/views/digitalEconomy/Echarts/ManufacturingIndustryChart.vue";
import DigitalIndustrialization from "@/views/digitalEconomy/Echarts/DigitalIndustrialization.vue";
import SmartFactory from "@/views/digitalEconomy/Echarts/SmartFactory.vue";
import SegmentedIndustries from "@/views/digitalEconomy/Echarts/SegmentedIndustries.vue";
import KeyAreas from "@/views/digitalEconomy/Echarts/KeyAreas.vue";
import IndustrialEconomy from "@/views/digitalEconomy/Echarts/IndustrialEconomy.vue";
import smartFactoryProject from '@/assets/data/digitalEconomy/smartFactoryProjectList.json'
import {vue3ScrollSeamless} from "vue3-scroll-seamless";
import {reactive, ref} from "vue";
import utils from "@/utils/index.js";
import MarkRank from "@/views/digitalEconomy/components/markRank.vue";
import DigitalDis from "@/views/digitalEconomy/components/digitalDis.vue";
import DigitalMap from "@/views/digitalEconomy/components/digitalMap.vue";

const digitalAnalysisOfIndustries = ref([
  {
    title: '项目数',
    count: 7,
    unit: '个',
    color: '#eef6fd',
    icon: utils.getAssetsFile('bis1.png'),
    rate: '6.36',
    child: []
  },
  {
    title: '投资规模',
    count: 1.65,
    unit: '亿',
    color: '#fdf6ee',
    icon: utils.getAssetsFile('bis2.png'),
    rate: '4.13',
    child: []
  }
])
const smartFactoryProjectList = reactive(smartFactoryProject)
const classOptions = {
  limitMoveNum: 6,
  step: .5
};
</script>

<style scoped lang="scss">
.container {
  background-color: #ecf1f7;
}

.body {
  box-sizing: border-box;
  padding: 15px;
  background-color: #ecf1f7;
}

.card-box {
  background-color: #ffffff;

  .card-chart {
    height: calc(100% - 60px);
  }
}

.sub-title {
  font-size: 16px;
  padding: 10px 40px;
  position: relative;
  &::before{
    content: '';
    position: absolute;
    left: 10px;
    top: 17px;
    width: 20px;
    height: 10px;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
  }
}

.card-list {
  padding: 10px;

  > li {
    padding: 15px 20px;
    margin-bottom: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;

    > div:last-child {
      color: #666666;
      font-size: 14px;
      margin-left: 20px;
    }
  }
}

.ui-wrap {
  padding: 10px;

  > li {
    padding: 10px 0;
    border-bottom: 1px solid #efefef;
    line-height: 25px;
    font-size: 14px;

    .ui-flex {
      font-size: 0.9em;
      display: flex;
      justify-content: space-between;
    }
  }
}

.card-boot {
  height: 210px;
  padding: 0 10px;

  > li {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    border-bottom: 1px solid #eaeaea;
  }
}
</style>
